<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/static/client/layui/css/layui.css"/>
    <link rel="stylesheet" href="/static/client/cropper/cropper.css">
    <link rel="stylesheet" href="/static/client/css/user-x.css">
<body style="padding-top: 30px;  padding-bottom: 100px;">


<div class="layui-row">
    <div class="layui-col-md7  layui-col-md-offset1">


        <form class="layui-form" action="" id="blogForm">
            <input type="hidden" name="token" value="${token}">
            <input type="hidden" name="uuid" value="${album.uuid}">
            <div class="layui-form-item">
                <label class="layui-form-label">主题</label>
                <div class="layui-input-block">
                    <input type="text" value="${album.title}"
                           <c:if test="${flag=='look'}">disabled</c:if> name="title" required
                           lay-verify="required|title" lay-verType="tips" placeholder="请输入主题（50字内）" autocomplete="off"
                           class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">位置</label>
                <div class="layui-input-block">
                    <input type="text" name="address" value="${album.address}" required lay-verify="required"
                           lay-verType="tips" placeholder="请选择位置" autocomplete="off" class="layui-input">
                    <c:if test="${flag=='update'}">
                        <button style="margin-top: 4px" type="button" class="layui-btn layui-btn-sm layui-btn-normal"
                                <c:if test="${flag=='look'}">disabled</c:if> id="addressBtn">
                            <i class="layui-icon layui-icon-location"></i>选取位置
                        </button>
                    </c:if>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">图片</label>
                <div class="layui-input-block">

                    <c:forEach items="${album.imgUrl}" var="url">
                        <c:if test="${ not empty url}">
                            <div class="showImg">
                                <img width="228" height="128" src="${url}" alt="" id="${album.uuid}-${url}" >
                                <c:if test="${flag=='update'}">
                                    <div><span><i class="layui-icon layui-icon-delete"></i>删除</span></div>
                                </c:if>
                            </div>
                        </c:if>
                    </c:forEach>

                    <c:if test="${flag=='update'}">
                        <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="formCoverUpload">
                            添加图片
                        </button>
                    </c:if>
                </div>
            </div>


            <div class="layui-form-item">
                <div class="layui-input-block">
                    <c:if test="${flag=='update'}">
                        <button name="status" value="0" class="layui-btn layui-btn-normal" lay-submit
                                lay-filter="formAlbum">保存并发布
                        </button>
                        <button name="status" value="1" class="layui-btn" lay-submit lay-filter="formAlbum">保存草稿箱
                        </button>
                    </c:if>
                </div>
            </div>
        </form>


    </div>
</div>

<script src="/static/client/js/jquery-3.4.1.js"></script>
<script type="text/javascript" src="/static/client/cropper/cropper.js"></script>
<script src="/static/client/layui/layui.js"></script>
<script src="/static/client/js/user-album.js"></script>
</body>
</html>